// @ts-ignore
import { BorderBox7, Decoration3 } from '@jiaminghi/data-view-react';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import '../../Home.less';

interface TabItem {
  key: number;
  title: string;
  content: string[];
}

const ColumnCharts: React.FC = () => {
  const tabList: TabItem[] = [
    {
      key: 1,
      title: '2023.12',
      content: ['2023.12，开始思考项目主题方向', '2023.12，准备开发计划....', '2023.12，收集相关资料....', '2023.12，学习相关技术....', '2023.12，新的征程开始....'],
    },
    {
      key: 2,
      title: '2024.01',
      content: [
        '2024.01，朝着开题的目标进行系统框架的设计',
        '2024.01，去图书馆查阅文献',
        '2024.01，和老师以及同学探讨技术问题',
        '2024.01，思考整体架构设计',
        '2024.01，当下流行技术....',
      ],
    },
    {
      key: 3,
      title: '2024.02',
      content: ['2024.02，撰写系统设计文稿', '2024.02，选择合适的前端技术', '2024.02，选择合适的后端技术', '2024.02，选择合适的数据库技术', '2024.02，项目开始....'],
    },
    {
      key: 4,
      title: '2024.03',
      content: [
        '2024.03，编写后台springboot服务端',
        '2024.03，编写vue的门户网站及管理端',
        '2024.03，编写数据大屏',
        '2024.03，去网络上找一些测试数据',
        '2024.03，项目持续推进中....',
      ],
    },
    {
      key: 5,
      title: '2024.04',
      content: ['2024.04，程序模块的单元测试', '2024.04，程序模块的集成测试', '2024.04，数据的完善', '2024.04，程序的试运行开始', '2024.04，程序完善....'],
    },
  ];

  let [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      if (index === tabList.length - 1) {
        setIndex(0);
      } else {
        setIndex(index + 1);
      }
    }, 2000);
    return () => {
      clearInterval(timer);
    };
  }, [index]);

  return (
    <div className="h-min">
      <BorderBox7>
        <div className="echart_title">
          <div>我是标题</div>
          <Decoration3 className="decoration3" />
        </div>
        <div className="develop h-240">
          <div className="develop_title">
            {tabList.map((i) => (
              <div className="develop_title_box" key={i.key}>
                <div className={clsx('develop_title_item', i.key === tabList[index].key ? 'develop_title_item_active' : '')}>
                  {i.title}
                </div>
                <div className={clsx('develop_title_dot', i.key === tabList[index].key ? 'develop_title_dot_active' : '')}>
                  <span></span>
                </div>
              </div>
            ))}
          </div>
          <div className="develop_line"></div>
          <div className="develop_content">
            {tabList[index].content.map((i) => (
              <div key={i} className="develop_content_item wordHidden">
                {i}
              </div>
            ))}
          </div>
        </div>
      </BorderBox7>
    </div>
  );
};
export default ColumnCharts;
